<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-table-ctx-wrap">
				<div class="table-view">
					<div class="custom-table">
						<el-table :data="tableData" stripe border>
							<el-table-column v-for="(item, index) in tableColumns" :prop="item.field" :label="item.field_title"
								:width="item.table_width">
							</el-table-column>

							<el-table-column  fixed="right" label="操作" width="400">
								<template slot-scope="scope">
									<div class="row-action-list">
										<div class="row-action-item">
											<el-button @click="doCopyApiTitle(scope.row, scope.$index, scope)" type="text">复制接口名</el-button>
											<el-button @click="doCopyApiDesc(scope.row, scope.$index, scope)" type="text">复制请求参数</el-button>
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {api_list} from '@/constant/dev/dev-api-admin.js'
	
	import {
		mapState
	} from "vuex";
	export default {
		name: "dev-api-web",
		components: {

		},
		props: {

		},
		data() {
			return {
				tableData:  api_list,
				tableColumns: [{
						field: "api_title",
						field_title: "接口名",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: '',
						default_value: '',
					},
					{
						field: "api_desc",
						field_title: "接口描述",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: '',
						default_value: '',
					},
				],
			};
		},
		computed: {

		},
		watch: {},
		created() {
			this.setView();
		},
		mounted() {

		},
		methods: {
			setView() {
				this.$log('api_list', api_list)
			},
			doCopyApiTitle() {

			},
			doCopyApiDesc() {

			}
		},
	};
</script>

<style scoped lang="less">
	::v-deep .el-input__inner {
		padding: 0 3px;
		text-align: center;
	}

	.el-radio {
		margin-right: 5px;
	}




	.page-wrap {
		.page-inner {}
	}

	.page-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	/deep/ .table-image-list {
		display: flex;

		.table-image-item {
			&+.table-image-item {
				margin-left: 10px;
			}
		}
	}

	/deep/ .el-table table {
		width: 100% !important;

		thead {
			th.el-table__cell {
				background: #f8f8f8;
				color: #000;
				// font-weight: bold;
			}
		}
	}

	.page-table-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}




	.json-input {
		margin-bottom: 20px;
	}

	.json-btn-box {
		display: flex;
		justify-content: flex-end;
	}


	// 新增
	.control-box {
		.flex-between();

		.control-left {
			.flex();

			.control-item {
				margin-right: 10px;
			}
		}

		.control-right {
			.flex();

			.action-item {
				margin-left: 10px;
			}
		}
	}

	.table-view {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.filter-box {
		margin-top: 20px;
		padding: 20px;
		padding-bottom: 0;
		background: rgb(248, 249, 250);
	}

	// 表格工具栏
	.table-util {
		.flex-between();

		.util-left {
			.flex();
			min-width: 100px;

			.util-items {
				.flex();

				.item {
					margin-right: 10px;
				}
			}
		}

		.util-right {}
	}

	.custom-current-page {
		text-align: center;
	}

	.checked-count {
		margin-left: 20px;
		margin-right: 20px;
	}


	.row-action-list {
		text-align: center;
		.flex-center();

		.row-action-item {
			&+.row-action-item:before {
				content: "";
				display: inline-block;
				width: 2px;
				height: 12px;
				background: #aaa;
				margin: 0 12px;
				margin: 0 6px;
				position: relative;
				top: 2px;
			}
		}

		.divider {}
	}
</style>